<template>
    <basic-container>
        <el-form :inline="true" :model="search"  size="small">
            <el-form-item label="日期">
                <el-date-picker
                        v-model="search.date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="attackCity"
                    label="发起攻击城市"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="attackNum"
                    label="攻击次数">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button type="text" @click="openDrawer(scope.row)" size="small">查看攻击详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    class="right mt-2 pb-4"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
        </div>
        <el-drawer
                size="55%"
                title="详情"
                append-to-body
                :visible.sync="drawer"
                direction="rtl"
        >
            <el-scrollbar>
                <template v-if="detailList.length > 0">
                    <el-row v-for="item in detailList" :key="item.id" type="flex" class="px-4 my-2">
                        <el-col>日期：{{item.date}}</el-col>
                        <el-col>发起攻击城市：<el-tag size="small">{{item.attackCity}}</el-tag></el-col>
                        <el-col>被攻击国家：<el-tag type="danger" size="small">{{item.attackedCountry == '中国'?'境内':item.attackedCountry}}</el-tag></el-col>
                        <el-col>被攻击地区：<el-tag type="danger" size="small">{{item.attackedCity}}</el-tag></el-col>
                        <el-col>攻击次数：<span class="danger" style="font-weight: bold">{{item.attackNum}}</span></el-col>
                    </el-row>
                </template>
            </el-scrollbar>
        </el-drawer>
    </basic-container>
</template>

<script>

  import {groupByAttackCity, detail} from "@/youan/api/sd_attack";

  export default {
    name: "index",
    data() {
      return {
        tableData: [],
        drawer: false,
        detailList: [],
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        search: {
          date: ""
        }
      }
    },
    created() {
      this.onLoad();
    },
    methods: {
      async onLoad() {
        const result = await groupByAttackCity(this.page.currentPage, this.page.pageSize, this.search);
        if(result.data.success) {
          this.tableData = result.data.data.records;
          this.page.total = result.data.data.total;
        }
      },
      openDrawer(row) {
        this.drawer = true;
        this.detail(row);
      },
      async detail(row) {
        const result = await detail(row)
        if(result.data.success) {
          this.detailList = result.data.data;
        }
      },
      handleCurrentChange() {
        this.page.currentPage = current;
        this.onLoad();
      },
      handleSizeChange() {
        this.page.pageSize = size;
        this.onLoad();
      },
      onSubmit() {
        this.onLoad();
      }
    },
  }
</script>

<style scoped>

</style>